import { computed, readonly, ref } from 'vue'
import { defineStore } from 'pinia'
import { FULLSCREEN_PHOTO_TYPE } from '@/constant'
import { trackEvent } from '@/gtm'

export const useFullscreenPhotoStore = defineStore('fullscreenPhoto', () => {
  const type = ref(FULLSCREEN_PHOTO_TYPE.CLOSE)
  const isOpen = computed(() => type.value !== FULLSCREEN_PHOTO_TYPE.CLOSE)
  const isClose = ref(false)

  // FULLSCREEN_PHOTO_TYPE.SINGLE
  const dataUrl = ref(null)

  // FULLSCREEN_PHOTO_TYPE.MULTIPLE
  const feed = ref(null)

  const showWaterMark = ref(false)

  function openSingle(imgDataUrl, watermark = false) {
    type.value = FULLSCREEN_PHOTO_TYPE.SINGLE
    dataUrl.value = imgDataUrl
    showWaterMark.value = watermark
    isClose.value = false
  }

  function openMultiple(item, watermark = false) {
    type.value = FULLSCREEN_PHOTO_TYPE.MULTIPLE
    feed.value = item
    showWaterMark.value = watermark
    isClose.value = false

    const { aff, id } = item
    trackEvent({ key: 51, meta: { aff, id } })
  }

  function closeFullscreen() {
    type.value = FULLSCREEN_PHOTO_TYPE.CLOSE
    dataUrl.value = null
    feed.value = null
    isClose.value = true
  }

  return {
    type: readonly(type),
    isOpen,
    isClose,

    dataUrl: readonly(dataUrl),
    feed: readonly(feed),

    showWaterMark: readonly(showWaterMark),

    openSingle,
    openMultiple,
    closeFullscreen,
  }
})
